:host {
	box-shadow: var(--_ui5_popover_box_shadow);
	background-color: var(--_ui5_popover_background);
	max-width: calc(100vw - (100vw - 100%) - 2 * var(--_ui5_popup_viewport_margin));
}

:host([hide-arrow]) {
	box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
}

/* pointing upward arrow */
:host([actual-placement="Bottom"]) .ui5-popover-arrow {
	left: calc(50% - 0.5625rem);
	top: -0.5rem;
	height: 0.5rem;
}

:host([actual-placement="Bottom"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_upward_arrow_margin);
}

/* pointing right arrow */
:host([actual-placement="Left"]) .ui5-popover-arrow {
	top: calc(50% - 0.5625rem);
	right: -0.5625rem;
	width: 0.5625rem;
}

:host([actual-placement="Left"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_right_arrow_margin);
}

/* pointing downward arrow */
:host([actual-placement="Top"]) .ui5-popover-arrow {
	left: calc(50% - 0.5625rem);
	height: 0.5625rem;
	top: 100%;
}

:host([actual-placement="Top"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_downward_arrow_margin);
}

/* pointing left arrow */
:host(:not([actual-placement])) .ui5-popover-arrow,
:host([actual-placement="Right"]) .ui5-popover-arrow {
	left: -0.5625rem;
	top: calc(50% - 0.5625rem);
	width: 0.5625rem;
	height: 1rem;
}

:host(:not([actual-placement])) .ui5-popover-arrow:after,
:host([actual-placement="Right"]) .ui5-popover-arrow:after {
	margin: var(--_ui5_popover_left_arrow_margin);
}

:host([hide-arrow]) .ui5-popover-arrow {
	display: none;
}

.ui5-popover-root {
	min-width: 6.25rem;
}

.ui5-popover-arrow {
	pointer-events: none;
	display: block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	overflow: hidden;
}

.ui5-popover-arrow:after {
	content: "";
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	background-color: var(--_ui5_popover_background);
	box-shadow: var(--_ui5_popover_box_shadow);
	transform: rotate(-45deg);
}

:host([modal])::backdrop {
	background-color: var(--_ui5_popup_block_layer_background);
	opacity: var(--_ui5_popup_block_layer_opacity);
}

:host([modal]) .ui5-block-layer {
	display: block;
}
